{extend name="../layout/base"}
{block name="title"}{$web_title}{/block}
{block name="body"}
<style>
    .icon-bookshelf{position: absolute;top: 0;width: 26px;right: 4px;}
    .bookshelfListMain{position:relative;}
</style>
<div class='bookshelf'>
    <table class='head' cellpadding="0" cellspacing="0">
        <tr>
            <td class="head_left"></td>
            <td align="center"><table class='head_but'>
                <tr>
                    <td class='head_but_click'>收藏</td>
                    <td ><a href='history.html'>历史</a></td>
                </tr>
            </table></td>
            <td class="head_right "><img src='__IMG__/bookshelfEdit.png' onclick="edit()"></td>
        </tr>
    </table>
    {if count($collect)}
    <div class='bookshelfList'>

        {volist name="collect" id="item"}
        <div class='bookshelfListMain' data-id="{$item.cartoon_id}" data-model="{$item.model}" onclick='detail(jQuery(this))'>
            <div class='bookshelfListChoiceBut editDiv' style='height:0px;top:11px;right:2px;z-index:999'><img src="__IMG__/butOff.png"></div>
            <div class='bookshelfListMainImg'> <img src="{if $item.model==2}{$item['cartoon_id']|get_cartoon_img=###}{else/}{$item['cartoon_id']|get_novel_img=###}{/if}" data-original="{if $item.model==2}{$item['cartoon_id']|get_cartoon_img=###}{else/}{$item['cartoon_id']|get_novel_img=###}{/if}" class='lazyImg' style="height:149px"> </div>
            <div class='bookshelfListMainText'>
                <div class='bookshelfListMainTitle'>{$item.cartoon_name}</div>

                <div class='bookshelfListMainDes'>阅读进度:{$item.cartoon_id|getyuedu=###}</div>
            </div>
        </div>
        {/volist}
    </div>
    <div style="height:50px;clear:both"> </div>
    {else}
    <div class='noContent'> <img src="__IMG__/noContent.png"> <br>
        亲,你还没有收藏漫画哦 !  ~(*>﹏<*)~ <a href="/">
            <div class='noContentBut'>再去逛逛</div>
        </a>
    </div>
    {/if}
    <div class='bottomChoiceBut editDiv'>
        <table cellspacing="0" cellpadding="0" style='z-index:1000;'>
            <tr>
                <td class='editAll' onclick='editAll(jQuery(this))'><img src="__IMG__/butOn.png" /> <span>全选</span></td>
                <td onclick="delres()" ><img src="__IMG__/bookshelfDel2.png"  class='delImg' /> 删除</td>
            </tr>
        </table>
    </div>
    {include file="../layout/bootem" /}

</div>


{/block}
        {block name="nav"}{/block}
        {block name="bootem_js"}
<script type="text/javascript">
    todeatilType=true;
    $(function(){
        lazyImg();
        $('body').addClass('bookshelfBody');

    })

    //右上角编辑按钮
    function edit(){
        if($(".head_right").attr("class").indexOf("head_right_del")<0){
            $(".head_right").addClass("head_right_del");
            $(".editDiv").show();
            todeatilType=false;
            $(".head_right").find("img").attr("src","__IMG__/bookshelfDel.png");
            $("a").attr("disabled","true");
        }else{
            cancelEdit();
        }
        changeDelImg();
    }


    function cancelEdit(){
        $(".editDiv").hide();
        todeatilType=true;
        $(".head_right").find("img").attr("src","__IMG__/bookshelfEdit.png");
        $(".head_right").removeClass("head_right_del");
    }

    //全选,取消
    function editAll(obj){
        if(obj.attr("class").indexOf("editAllSelect")<0){
            obj.find("span").html("取消");
            obj.find("img").attr("src","__IMG__/but3.png");
            $(".bookshelfListChoiceBut img").attr("src","__IMG__/butOn.png");
            obj.addClass("editAllSelect");
            $(".bookshelfListChoiceBut").addClass("bookshelfListChoiceButSelect");
        }else{
            obj.removeClass("editAllSelect");
            obj.find("img").attr("src","__IMG__/butOn.png");
            obj.find("span").html("全选");
            $(".bookshelfListChoiceBut img").attr("src","__IMG__/butOff.png");
            $(".bookshelfListChoiceBut").removeClass("bookshelfListChoiceButSelect");
        }
        changeDelImg();
    }

    //根据选择情况改变删除按钮
    function changeDelImg(){
        if($(".bookshelfList").html().indexOf("bookshelfListChoiceButSelect")>-1){
            $(".delImg").attr("src","__IMG__/bookshelfDel3.png");
        }else{
            $(".delImg").attr("src","__IMG__/bookshelfDel2.png");
        }
    }

    function detail(obj){
        if(todeatilType){ //进详情
            var id = obj.attr('data-id');
			var model = obj.attr('data-model');
			if (model==2)
			{
				document.location.href='/books/'+id;
			}else{
				document.location.href='/book/info/id/'+id;
			}
            
        }else{ //编辑
            if(obj.find(".bookshelfListChoiceBut").attr("class").indexOf("bookshelfListChoiceButSelect")<0){
                obj.find(".bookshelfListChoiceBut img").attr("src","__IMG__/butOn.png");
                obj.find(".bookshelfListChoiceBut").addClass("bookshelfListChoiceButSelect");
            }else{
                obj.find(".bookshelfListChoiceBut img").attr("src","__IMG__/butOff.png");
                obj.find(".bookshelfListChoiceBut").removeClass("bookshelfListChoiceButSelect");
            }
            changeDelImg();
        }
    }
   function delres() {
          var  r =[];
		  var  m =[];
         $(".bookshelfListMain").each(function () {
			var  res =  $(this).find('.bookshelfListChoiceButSelect').parent().attr('data-id');
			var  model =  $(this).find('.bookshelfListChoiceButSelect').parent().attr('data-model');
            if(typeof(res) !="undefined"){
                r.push(res);
				m.push(model);
            }
         })
		 console.log(m);
         $.post('/shujia',{ids:r,model:m},function (msg) {
             layer.alert(msg.message);
             setTimeout(function(){
                 window.parent.location.reload();
                 window.location.reload;
             },1000);
         })
   }
</script>
        {/block}

